<template>
  <div>
    <p>倒计时事件:{{countTime}}</p>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="resume">继续</button>
  </div>
</template>

<script>
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
// 1. resume：可执行函数，开启定时器，每隔一个时间执行一次
// 2. pause： 可执行函数，只要执行这个函数，定时器就会暂停
export default {
  setup () {
    const countTime = ref(0)
    const { pause, resume } = useIntervalFn(() => {
      if (countTime.value <= 0) {
        pause()
        return
      }
      countTime.value--
    }, 1000)
    const start = () => {
      countTime.value = 3
      resume()
    }

    return {
      countTime,
      start,
      pause,
      resume
    }
  }
}
</script>

<style>

</style>
